feat: add TopicTag component #7177
Conversation
🦋 Changeset detectedLatest commit: 74b40ee The changes in this PR will be included in the next version bump. This PR includes changesets to release 1 package
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
github-actions
bot
added
staff
|
👋 Hi, this pull request contains changes to the source code that github/github-ui depends on. If you are GitHub staff, test these changes with github/github-ui using the integration workflow. Or, apply the |
github-actions
bot
requested a deployment
to
storybook-preview-7177
github-actions
bot
requested a deployment
to
storybook-preview-7177
github-actions
bot
requested a deployment
to
storybook-preview-7177
lukasoppermann
left a comment
lukasoppermann
left a comment
There was a problem hiding this comment.
Design looks great. 👍
github-actions
bot
requested a deployment
to
storybook-preview-7177
There was a problem hiding this comment.
Pull Request Overview
This pull request adds a new TopicTag component and companion TopicTag.Group component to the Primer React design system. The TopicTag component renders clickable tags (defaulting to <a> elements) with support for button semantics via an as prop. The Group component provides a flex layout for displaying multiple tags with appropriate spacing.
The implementation includes comprehensive test coverage, Storybook stories, visual regression tests across multiple themes and viewports, and documentation metadata.
Reviewed Changes
Copilot reviewed 14 out of 44 changed files in this pull request and generated 1 comment.
Show a summary per file
| File | Description |
|---|---|
| packages/react/src/TopicTag/TopicTag.tsx | Main component implementation with polymorphic as prop support |
| packages/react/src/TopicTag/TopicTagGroup.tsx | Helper component for laying out multiple tags |
| packages/react/src/TopicTag/index.ts | Exports TopicTag with Group as a nested property |
| packages/react/src/TopicTag/TopicTag.module.css | Styling for TopicTag with hover states and link reset |
| packages/react/src/TopicTag/TopicTagGroup.module.css | Flexbox layout with gap spacing for tag groups |
| packages/react/src/TopicTag/TopicTag.test.tsx | Unit tests for TopicTag component |
| packages/react/src/TopicTag/TopicTagGroup.test.tsx | Unit tests for TopicTagGroup component |
| packages/react/src/TopicTag/TopicTag.stories.tsx | Basic Storybook stories |
| packages/react/src/TopicTag/TopicTag.features.stories.tsx | Feature demonstration stories |
| packages/react/src/TopicTag/TopicTag.docs.json | Documentation metadata |
| e2e/components/TopicTag.test.ts | Visual regression and accessibility tests |
| packages/react/src/experimental/index.ts | Export TopicTag from experimental API |
| packages/react/src/tests/snapshots/exports.test.ts.snap | Updated export snapshot |
| .changeset/three-wombats-invite.md | Changeset for minor version release |
| </TopicTag>, | ||
| ) | ||
|
|
||
| await userEvent.click(screen.getByRole('link', {name: 'test'})) |
There was a problem hiding this comment.
The test on line 27 is incorrect. When as="button" is used, the component should render a <button> element with role "button", not "link". The test should use screen.getByRole('button', {name: 'test'}) instead.
hectahertz
left a comment
hectahertz
left a comment
There was a problem hiding this comment.
Love this, nice and clean ✨
| color: var(--fgColor-onEmphasis); | ||
| } | ||
|
|
||
| /* Add a reset to when TopicTag is an <a> element since our link styles apply an underline text-decoration by default */ |
There was a problem hiding this comment.
Thanks for adding this explanation! ✨
Closes https://github.com/github/primer/issues/5248
Changelog
New
TopicTagcomponent along with a helperTopicTag.Groupcomponent for layoutChanged
Removed
Rollout strategy